<template>
	<view class="draft">
		<view class="switch">
			<view
				@click="clickSwitchButton(1)"
				:style="switchCurrent == 1?'color: #409EFF;':''">帖子草稿</view>
			<view
				@click="clickSwitchButton(2)"
				:style="switchCurrent == 2?'color: #409EFF;':''">评论草稿</view>
		</view>
		<template v-if="switchCurrent == 1">
			<template v-if="draftListState == 'success'">
				<view class="draft-list">
					<view class="for for-gauge-outfit">
						<view class="for-id">ID</view>
						<view class="for-title">标题</view>
						<view class="for-setUp">设置</view>
					</view>
					<view
						v-for="item in draftList"
						class="for">
						<view class="for-id">{{item.id}}</view>
						<view class="for-title"><text>{{item.title ? item.title : '本帖无标题'}}</text></view>
						<view class="for-setUp">
							<view @click="$_To('editor/editor?type=edit&id=' + item.id)">编辑</view>
							<text @click="clickDeleteButton(item.id)">删除</text>
						</view>
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content:center;">
					<view
						class="button"
						style="width: 200rpx;background: #409EFF;color: #FFF;margin: 25rpx 25rpx 0 0;"
						@click="$_To('editor/editor?type=new')">新建草稿</view>
					<view
						class="button"
						style="width: 200rpx;background: #F56C6C;color: #FFF;margin: 25rpx 0 0 0;"
						@click="clickDeleteAllButton">全部删除</view>
				</view>
			</template>
			<template v-if="draftListState == 'loading'">
				<public-loading></public-loading>
			</template>
			<template v-if="draftListState == 'empty'">
				<view class="draft-list">
					<view class="for for-gauge-outfit">
						<view class="for-id">ID</view>
						<view class="for-title">标题</view>
						<view class="for-setUp">设置</view>
					</view>
					<public-empty></public-empty>
				</view>
				<view
					class="button"
					style="width: 200rpx;background: #409EFF;color: #FFF;margin: 25rpx auto;"
					@click="$_To('editor/editor?type=new')">新建草稿</view>
			</template>
		</template>
		<template v-if="switchCurrent == 2">
			<template v-if="draftListCommentState == 'success'">
				<view class="draft-list">
					<view class="for for-gauge-outfit">
						<view class="for-id">ID</view>
						<view class="for-title">标题</view>
						<view class="for-setUp">设置</view>
					</view>
					<view
						v-for="item in draftListComment"
						class="for">
						<view class="for-id">{{item.id}}</view>
						<view class="for-title"><text>{{$_filterHtml(item.content)}}</text></view>
						<view class="for-setUp">
							<text
								@click="clickDeleteCommentButton(item.id)"
								style="margin-left: auto;margin-right: 25rpx;">删除</text>
						</view>
					</view>
				</view>
				<view
					style="display: flex;align-items: center;justify-content:center;">
					<view
						@click="clickDeleteCommentAllButton"
						class="button"
						style="width: 200rpx;background: #F56C6C;color: #FFF;margin: 25rpx 0 0 0;">全部删除</view>
				</view>
			</template>
			<template v-if="draftListCommentState == 'loading'">
				<public-loading></public-loading>
			</template>
			<template v-if="draftListCommentState == 'empty'">
				<public-empty></public-empty>
			</template>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchCurrent:1,
				draftList:[],
				draftListComment:[],
				draftListCommentState:"loading",
				draftListState:"loading",
			}
		},
		onShow(){
			
		},
		onLoad(e) {
			if(e.tab){
				this.switchCurrent = e.tab
			}
			if(this.$_loginOrNot()){
				this.getDraftList();
			}else{
				uni.switchTab({
					url:"/pages/my/my"
				})
			}
		},
		methods: {
			getDraftList(){
				uni.request({
					url:this.$_Url() + "/api/v2/editor/post/drafts",
					method:'GET',
					header: this.$_FresnsHeader(),
					success: (res) => {
						this.draftList = res.data.data.list;
						if(this.draftList.length){
							this.draftListState = "success"
						}else{
							this.draftListState = "empty"
						}
					}
				})
			},
			clickDeleteAllButton(){
				uni.showModal({
					title: "提示",
					content: "是否全部删除？不可恢复！",
					success: (res) => {
						if(res.confirm) {
							this.clickDeleteAllButton_Function()
						}
					}
				});
			},
			clickDeleteAllButton_Function(){
				uni.showLoading({ title: "删除中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					this.draftList.forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.request({
								url:this.$_Url() + "/api/v2/editor/post/" + item.id,
								method:'DELETE',
								header: this.$_FresnsHeader(),
								success(res) {
									if(res.data.code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.getDraftList();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '删除失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 点击，删除，草稿
			clickDeleteButton(id){
				uni.showModal({
					title: "提示",
					content: "是否删除本草稿？不可恢复哟！",
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url:this.$_Url() + "/api/v2/editor/post/" + id,
								method:'DELETE',
								header:this.$_FresnsHeader(),
								success: (res_) => {
									if(res_.data.code == 0){
										uni.showToast({
											title:"删除成功",
											icon:"none",
											duration:1000
										});
										this.draftListState = "loading";
										this.getDraftList();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							})
						}
					}
				});
			},
			clickSwitchButton(e){
				this.switchCurrent = e;
				if(this.switchCurrent == 1){
					this.getDraftList()
				}
				if(this.switchCurrent == 2){
					this.getDraftListComment()
				}
			},
			getDraftListComment(){
				this.$_Request(
					"GET","/api/v2/editor/comment/drafts",{},
					(res) => {
						this.draftListComment = res.data.data.list;
						if(this.draftListComment.length){
							this.draftListCommentState = "success"
						}else{
							this.draftListCommentState = "empty"
						}
					}
				)
			},
			clickDeleteCommentButton(id){
				uni.showModal({
					title: "提示",
					content: "是否删除本草稿？不可恢复哟！",
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url:this.$_Url() + "/api/v2/editor/comment/" + id,
								method:'DELETE',
								header:this.$_FresnsHeader(),
								success: (res_) => {
									if(res_.data.code == 0){
										uni.showToast({
											title:"删除成功",
											icon:"none",
											duration:1000
										});
										this.draftListCommentState = "loading";
										this.getDraftListComment();
									}else{
										uni.showToast({
											title:res_.data.message,
											icon:"none",
											duration:1000
										});
									}
								}
							})
						}
					}
				});
			},
			clickDeleteCommentAllButton(){
				uni.showModal({
					title: "提示",
					content: "是否全部删除？不可恢复！",
					success: (res) => {
						if(res.confirm) {
							this.clickDeleteCommentAllButton_Function()
						}
					}
				});
			},
			clickDeleteCommentAllButton_Function(){
				uni.showLoading({ title: "删除中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					this.draftListComment.forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.request({
								url:this.$_Url() + "/api/v2/editor/comment/" + item.id,
								method:'DELETE',
								header: this.$_FresnsHeader(),
								success(res) {
									if(res.data.code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.getDraftListComment();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '删除失败请重试',
							icon: 'none'
						})
					})
				})
			},
		},
		// 下拉，加载
		onPullDownRefresh() {
			this.switchCurrent = 1;
			this.getDraftList();
			this.draftList = [];
			this.draftListState = "loading";
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 100);
		},
		onBackPress(){
			this.$store.commit('mutationsStatelistStatus',true)
		}
	}
</script>

<style lang="scss">
.draft{
	overflow: hidden;
	view{
		font-size: 28rpx;
	}
	.switch{
		display: flex;
		align-items: center;
		justify-content: center;
		view{
			border: 1rpx solid $BianKuangSe;
			margin: 25rpx 12.5rpx;
			border-radius: 100rpx;
			line-height: 28rpx;
			font-size: 28rpx;
			background: $BeiJingSe;
			padding: 15rpx 25rpx;
		}
	}
	.button{
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-size: 28rpx;
		line-height: 28rpx;
		padding: 25rpx 0;
		border-radius: 5rpx;
	}
	.draft-list{
		border-top: 1rpx solid $BianKuangSe;
		.for{
			display: flex;
			width: 100%;
			height: 70rpx;
			border-bottom: 1rpx solid $BianKuangSe;
			.for-id{
				flex-shrink: 0;
				width: 100rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: $ZhanWeiSe;
			}
			.for-title{
				flex: 1;
				height: 70rpx;
				display: flex;
				align-items: center;
				text{
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
			.for-setUp{
				display: flex;
				flex-shrink: 0;
				width: 200rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				view{
					font-size: 22rpx;
					margin: 0 25rpx 0 0;
					width: 80rpx;
					height: 40rpx;
					border: 1rpx solid $LanSe;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100rpx;
					color: $LanSe;
				}
				text{
					font-size: 22rpx;
					color: $HongSe;
				}
			}
		}
		.for-gauge-outfit{
			background: $BeiJingSe;
			.for-id{
				color: $YuanSe;
			}
			.for-title{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>